<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        table, td, th {
            border: 1px solid green;
        }

        th {
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
<span>
    CSS中的伪类选择器就是前面带有冒号(:)的选择器
</span>
<br>
<div>
    <table>
        <tr>
            <th>Selector</th>
            <th>Meaning</th>
            <th>CSS</th>
        </tr>
        <tr>
            <td>:active</td>
            <td>选择正在被激活的元素</td>
            <td>1</td>
        </tr>
        <tr>
            <td>:hover</td>
            <td>选择被鼠标悬浮着元素</td>
            <td>1</td>
        </tr>
        <tr>
            <td>:link</td>
            <td>选择未被访问的元素</td>
            <td>1</td>
        </tr>
        <tr>
            <td>:visited</td>
            <td>选择已被访问的元素</td>
            <td>1</td>
        </tr>
        <tr>
            <td>:first-child</td>
            <td>选择满足是其父元素的第一个子元素的元素</td>
            <td>2</td>
        </tr>
        <tr>
            <td>:lang</td>
            <td>选择带有指定 lang 属性的元素</td>
            <td>2</td>
        </tr>
        <tr>
            <td>:focus</td>
            <td>选择拥有键盘输入焦点的元素</td>
            <td>2</td>
        </tr>
        <tr>
            <td>:enable</td>
            <td>选择每个已启动的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:disable</td>
            <td>选择每个已禁止的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:checked</td>
            <td>选择每个被选中的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:target</td>
            <td>选择当前的锚点元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:first-of-type</td>
            <td>选择满足是其父元素的第一个某类型子元素的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:last-of-type</td>
            <td>选择满足是其父元素的最后一个某类型子元素的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:only-of-type</td>
            <td>选择满足是其父元素的唯一一个某类型子元素的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:nth-of-type(n)</td>
            <td>选择满足是其父元素的第n个某类型子元素的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:nth-last-of-type(n)</td>
            <td>选择满足是其父元素的倒数第n个某类型的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:only-child</td>
            <td>选择满足是其父元素的唯一一个子元素的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:last-child</td>
            <td>选择满足是其父元素的最后一个元素的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:nth-child(n)</td>
            <td>选择满足是其父元素的第n个子元素的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:nth-last-child(n)</td>
            <td>选择满足是其父元素的倒数第n个子元素的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:empty</td>
            <td>选择满足没有子元素的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:in-range</td>
            <td>选择满足值在指定范围内的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:out-of-range</td>
            <td>选择值不在指定范围内的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:invalid</td>
            <td>选择满足值为无效值的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:valid</td>
            <td>选择满足值为有效值的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:not(selector)</td>
            <td>选择不满足selector的元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:optional</td>
            <td>选择为可选项的表单元素，即没有“required”属性</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:read-only</td>
            <td>选择有"readonly"的表单元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:read-write</td>
            <td>选择没有"readonly"的表单元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>:root</td>
            <td>选择根元素</td>
            <td>3</td>
        </tr>
    </table>
</div>
</body>
</html>